<template>
	<div class="marquee-list-rd">
		<div class="marquee">
	        <div class="marquee_title">
	            <img src="~__assets/images/billboard.png" alt="">
	        </div>
	        <div class="marquee_box">
	            <ul class="marquee_list" :class="{marquee_top:animate}">
	                <li v-for="(item, index) in marqueeList">
	                    <span class="billboard-icon">{{item.type}}</span>
	                    <span class="billboard-conent">{{item.contents}}</span>
	                </li>
	            </ul>
	        </div>
	    </div>
	</div>
</template>

<style scoped lang="scss">
	.marquee-list-rd{
		height:42px;
		padding:5px 0;
		overflow: hidden;
		background-color: #fff;
	}
	.marquee {
		width: 100%;
		height: 30px;
		display: inline-block;
		line-height: 30px;
		color: #3A3A3A;

		.marquee_title {
			width:a(120px);
			float:left;
			padding: 0 10px;
			text-align: center;
			height: 30px;
			line-height: 30px;
			font-size: 14px;

			img{
				width:32px;
			}
		}

		.marquee_box {
			display: block;
			position: relative;
			width:a(620px);
			height: 30px;
		    overflow: hidden;
			.marquee_list {
				display: block;
				position: absolute;
				top: 0;
				left: 0;

				li {
					height: 30px;
					line-height: 30px;
					font-size: 14px;
					width:a(620px);
					-o-text-overflow: ellipsis;
				    text-overflow: ellipsis;
				    white-space: nowrap;
				    overflow: hidden;
					span {
						padding: 0 2px;
					}
					.billboard-icon{
						color: #E60A1F;
						border:1px solid #E60A1F;
						border-radius: 3px;
					}
				}
				
				&.marquee_top {
					transition: all 0.5s;
					-webkit-transition: all 0.5s;
					margin-top: -30px
				}
			}
		}
	}
</style>

<script>
	export default{
		name:"marquee-list",
		props:["marqueeList"],
		data(){
			return{
				animate:false
			}
		},
		created: function () {
            setInterval(this.showMarquee, 3000)
        },
        methods: {
            showMarquee: function () {
                this.animate = true;
                setTimeout(()=>{
                    this.marqueeList.push(this.marqueeList[0]);
                	this.marqueeList.shift();
                	this.animate = false;
            	},500)
            }
        }
	}
</script>